import React, { memo, useEffect, useState, useRef, useCallback } from "react";
import { parseLyric } from "@/utils/lrc-parse";
// import Headertitle from "@/components/headertitle";
import { Musicwrap } from "./style";
import axios from "axios";

import { Slider, message } from "antd";
export default memo(function Music() {
  const audioref = useRef();
  //当前是第几首歌
  const [current, setCurrent] = useState(0);
  //当前的歌词
  const [lyric, setLyric] = useState([]);
  //滑动条的value、
  const [svalue, setSvalue] = useState(0);
  //音乐播放的进度（时间）
  // const [currenttime, setCurrenttime] = useState(0);
  // console.log(currenttime);
  //判断滑动条是否在被拖动
  const [ischange, setIschange] = useState(false);
  //当前的歌词是第几个
  const [currentlyricindex, setCurrentlyricindex] = useState(0);
  //音乐是否播放
  const [muisplay, setMuisplay] = useState(false);
  //获取歌词
  const [mulist] = useState([
    "http://123.207.32.32:9001/lyric?id=167873",
    "http://123.207.32.32:9001/lyric?id=167876",
    "http://123.207.32.32:9001/lyric?id=167908",
  ]);
  const [muplay] = useState([
    "https://music.163.com/song/media/outer/url?id=167873.mp3",
    "https://music.163.com/song/media/outer/url?id=167876.mp3",
    "https://music.163.com/song/media/outer/url?id=167908.mp3",
  ]);
  const [mudetail] = useState([
    {
      singername: "许嵩",
      songname: "多余的解释",
      pic: "https://p2.music.126.net/KyBR4ZDYFlzQJE_uyvfjpA==/109951166118671647.jpg",
      time: 277000,
    },
    {
      singername: "许嵩",
      songname: "有何不可",
      pic: "https://p1.music.126.net/KyBR4ZDYFlzQJE_uyvfjpA==/109951166118671647.jpg",
      time: 241840,
    },
    {
      singername: "许巍",
      songname: "蓝莲花(Live)",
      pic: "https://p2.music.126.net/OvgbsC9XCCtKXtp7GB_Xyg==/91259465106346.jpg",
      time: 411000,
    },
  ]);
  useEffect(() => {
    audioref.current.pause();
    return () => {
      message.destroy();
    };
  }, []);
  useEffect(() => {
    axios(mulist[current]).then((value) => {
      // console.log(parseLyric(value.data.lrc.lyric));
      setLyric(parseLyric(value.data.lrc.lyric));
    });
    audioref.current.src = muplay[current];
    audioref.current.play().then(
      (res) => {
        setMuisplay(true);
      },
      (err) => {
        setMuisplay(false);
      }
    );
  }, [mulist, muplay, current]);

  //播放时间更新
  const timeupdate = (e) => {
    // setCurrenttime(e.target.currentTime * 1000);
    if (!ischange) {
      setSvalue(((e.target.currentTime * 1000) / mudetail[current].time) * 100);
    }
    let i = 0;
    for (; i < lyric.length - 1; i++) {
      if (e.target.currentTime * 1000 < lyric[i + 1].time) {
        break;
      }
    }
    if (i !== currentlyricindex) {
      setCurrentlyricindex(i);
      message.open({
        content: lyric[i].content,
        key: "1",
        duration: 0,
        className: "lgric",
      });
    }
  };
  //音乐播放结束
  const musicend = (c = 1) => {
    if (current + c < 0) {
      setCurrent(current + c + 3);
      console.log(current + c + 3);
    } else {
      setCurrent((current + c) % 3);
      console.log(current + c);
    }
    //避免自动播放造成的错误
    audioref.current.play().then(
      (res) => {},
      (err) => {}
    );
  };
  //滑动条正在拖动
  const onChange = useCallback((value) => {
    setIschange(true);
    setSvalue(value);
  }, []);
  //滚动条改变之后
  const onAfterChange = useCallback(
    (value) => {
      // setCurrenttime((value / 100) * mudetail[current].time);
      audioref.current.currentTime =
        ((value / 100) * mudetail[current].time) / 1000;
      setIschange(false);
    },
    [mudetail, current]
  );
  //音乐播放或者暂停
  const handleplay = () => {
    muisplay ? audioref.current.pause() : audioref.current.play();
    setMuisplay(!muisplay);
  };
  return (
    <Musicwrap>
      {/* <Headertitle title="音乐播放器" iconu="iconfont icon-yinle"></Headertitle> */}
      <div className="main">
        <div className="top">
          <img src={mudetail[current].pic} alt="" />
          <div className="right">
            <div className="top">
              <span className="iconfont icon-yinle"></span>
              <span>{mudetail[current].songname}</span>
            </div>
            <div className="bottom">
              <span className="iconfont icon-yonghu"></span>
              <span>{mudetail[current].singername}</span>
            </div>
          </div>
        </div>
        <div className="middle">
          <Slider
            min={0}
            max={100}
            value={svalue}
            onChange={onChange}
            onAfterChange={onAfterChange}
          />
        </div>
        <div className="bottom">
          <span
            className="iconfont icon-shangyishou"
            onClick={(e) => musicend(-1)}
          ></span>
          <span
            onClick={handleplay}
            className={
              muisplay
                ? "iconfont icon-zanting_huaban1"
                : "iconfont icon-24gf-playCircle"
            }
          ></span>
          <span
            className="iconfont icon-xiayishou"
            onClick={(e) => musicend(1)}
          ></span>
        </div>
      </div>
      <audio
        ref={audioref}
        onTimeUpdate={timeupdate}
        onEnded={(e) => musicend(1)}
      ></audio>
    </Musicwrap>
  );
});
